<template>
    <div>
        <div class="search-box">
            <div class="search-con">
                <i
                    class="back"
                    @click="
                        $router.back();
                        searchVal = '';
                    "
                ></i>
                <div class="search">
                    <i></i>
                    <input type="text" @keyup.enter="goSearch" v-model="searchVal" placeholder="请输入要搜索的内容" />
                </div>
                <button @click="goSearch">搜索</button>
            </div>

            <router-view @hot="getHotValue"></router-view>
        </div>
    </div>
</template>

<script>
// import { bookSearch } from "@/api/found";
export default {
    data() {
        return {
            searchVal: "",
            flag: false,
        };
    },
    methods: {
        getHotValue(value) {
            this.searchVal = value;
            this.goSearch();
        },
        goSearch() {
            if (this.searchVal.length > 0) {
                let historys = localStorage.history;
                // console.log("1.0", historys);
                if (historys == undefined) {
                    let historyArr = [this.searchVal];
                    // console.log("2.0", historyArr);

                    let historyStr = historyArr.toString();
                    // console.log("3.0", historyStr);

                    localStorage.history = historyStr;
                } else {
                    let historyArr = historys.split(",");
                    // console.log("4.0", historyArr);
                    this.flag = false;
                    for (let i = 0; i <= historyArr.length - 1; i++) {
                        if (historyArr[i] == this.searchVal) {
                            this.flag = true;
                            break;
                        }
                    }
                    if (!this.flag) {
                        historyArr[historyArr.length] = this.searchVal;
                        let historyStr = historyArr.toString();
                        localStorage.history = historyStr;
                    }
                }
                this.$router.push({
                    path: "/search/searchlist",
                    query: {
                        value: this.searchVal,
                    },
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.search-box {
    width: 100%;
    padding: 0 15px;
    position: relative;
    .search-con {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding: 10px 15px 20px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #999;
        background: #fff;

        .back {
            margin-left: 5px;
            display: block;
            width: 10px;
            height: 10px;
            transform: rotate(45deg);
            border: 2px solid #313131;
            border-right-color: transparent;
            border-top-color: transparent;
        }

        .search {
            flex: 1;
            margin: 0 10px;
            position: relative;
            display: flex;
            i {
                position: absolute;
                top: 5px;
                left: 10px;
                display: block;
                width: 15px;
                height: 15px;
                background-image: url(@/assets/sousuo.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }

            input {
                width: 100%;
                border-radius: 20px;
                padding: 5px 33px;
                outline: 0;
                border: 0;
                background: #f0f0f0;
            }
        }

        button {
            padding: 0;
            width: 10%;
            border: 0;
            background: #fff;
            font-size: 14px;
            color: #313131;
            text-align: right;
        }
    }
}
</style>
